﻿<common:LayoutAwarePage
    x:Name="pageRoot"
    x:Class="MusicZone.PlayList"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MusicZone"
    xmlns:data="using:MusicZone.Data"
    xmlns:common="using:MusicZone.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" Width="750">

    <Page.Resources>

        <!--
            Collection of grouped items displayed by this page, bound to a subset
            of the complete item list because items in groups cannot be virtualized
        -->
        <CollectionViewSource x:FieldModifier="Internal"
            x:Name="groupedItemsViewSource"
            Source="{Binding Groups}"
            IsSourceGrouped="true"
            ItemsPath="TopItems"
            d:Source="{Binding AllGroups, Source={d:DesignInstance Type=data:PlayListDataSource, IsDesignTimeCreatable=True}}"/>

        <!-- TODO: Delete this line if the key AppName is declared in App.xaml -->
        <x:String x:Key="AppName">My Application</x:String>
        <Style x:Key="OnOffToggleSwitchStyle" TargetType="ToggleSwitch">
        	<Setter Property="Template">
        		<Setter.Value>
        			<ControlTemplate TargetType="ToggleSwitch">
        				<Grid x:Name="grid" RenderTransformOrigin="0.5,0.5" Width="50" Height="50" HorizontalAlignment="Left">
        					<Grid.RenderTransform>
        						<CompositeTransform/>
        					</Grid.RenderTransform>
        					<VisualStateManager.VisualStateGroups>
        						<VisualStateGroup x:Name="CommonStates">
        							<VisualState x:Name="PointerOver"/>
        							<VisualState x:Name="Pressed"/>
        							<VisualState x:Name="Disabled"/>
        						</VisualStateGroup>
        						<VisualStateGroup x:Name="ToggleStates">
        							<VisualState x:Name="Off">
        								<Storyboard>
        									<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Play">
        										<DiscreteObjectKeyFrame KeyTime="0">
        											<DiscreteObjectKeyFrame.Value>
        												<Visibility>Visible</Visibility>
        											</DiscreteObjectKeyFrame.Value>
        										</DiscreteObjectKeyFrame>
        									</ObjectAnimationUsingKeyFrames>
        									<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Pause">
        										<DiscreteObjectKeyFrame KeyTime="0">
        											<DiscreteObjectKeyFrame.Value>
        												<Visibility>Collapsed</Visibility>
        											</DiscreteObjectKeyFrame.Value>
        										</DiscreteObjectKeyFrame>
        									</ObjectAnimationUsingKeyFrames>
        								</Storyboard>
        							</VisualState>
        							<VisualState x:Name="On">
        								<Storyboard>
        									<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Play">
        										<DiscreteObjectKeyFrame KeyTime="0">
        											<DiscreteObjectKeyFrame.Value>
        												<Visibility>Collapsed</Visibility>
        											</DiscreteObjectKeyFrame.Value>
        										</DiscreteObjectKeyFrame>
        									</ObjectAnimationUsingKeyFrames>
        									<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Pause">
        										<DiscreteObjectKeyFrame KeyTime="0">
        											<DiscreteObjectKeyFrame.Value>
        												<Visibility>Visible</Visibility>
        											</DiscreteObjectKeyFrame.Value>
        										</DiscreteObjectKeyFrame>
        									</ObjectAnimationUsingKeyFrames>
        								</Storyboard>
        							</VisualState>
        						</VisualStateGroup>
        						<VisualStateGroup x:Name="ContentStates">
        							<VisualState x:Name="OnContent"/>
        						</VisualStateGroup>
        						<VisualStateGroup x:Name="FocusStates">
        							<VisualState x:Name="Unfocused"/>
        							<VisualState x:Name="PointerFocused"/>
        						</VisualStateGroup>
        					</VisualStateManager.VisualStateGroups>
                            <Path x:Name="Play" UseLayoutRounding="False" Stretch="Uniform" RenderTransformOrigin="0.5,0.5" Height="17" Fill="White" Data="{Binding Mode=OneWay, Source={StaticResource Play}}"/>
                            <Path x:Name="Pause" Visibility="Collapsed" UseLayoutRounding="False" Stretch="Uniform" RenderTransformOrigin="0.5,0.5" Height="17" Fill="White" Data="{Binding Mode=OneWay, Source={StaticResource Pause}}"/>
        					<Ellipse Stroke="White" StrokeThickness="3"/>
        				</Grid>
        			</ControlTemplate>
        		</Setter.Value>
        	</Setter>
        </Style>
    </Page.Resources>

    <!--
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout
    -->
    <Grid Style="{StaticResource LayoutRootStyle}" Background="Black">
        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!-- Horizontal scrolling grid used in most view states -->       

        <!-- Vertical scrolling list only used when snapped -->
        
        <Grid Grid.Row="1">
        	<Grid.RowDefinitions>
        		<RowDefinition Height="70*"/>
        		<RowDefinition Height="30*"/>
        	</Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="60"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition/>
                <ColumnDefinition Width="60"/>
            </Grid.ColumnDefinitions>

            <StackPanel Grid.Column="1" Orientation="Vertical">
        		<Grid Width="264" Height="264" VerticalAlignment="Top" HorizontalAlignment="Left">
        			<Grid.RowDefinitions>
        				<RowDefinition/>
        				<RowDefinition Height="50"/>
        			</Grid.RowDefinitions>
        			<Border Grid.RowSpan="2" BorderThickness="3" BorderBrush="White" >
        				<Image Source="Assets/Spoke1/Img01.jpg" Stretch="UniformToFill"/>
        			</Border>
        			<Grid Grid.Row="1">
        				<Image Source="/Assets/HubPage/Top20InnerShade.png" Stretch="Fill" Margin="3,0,3,3"/>
        				<TextBlock FontSize="24" Text="05:30" Foreground="White" FontWeight="Light" FontFamily="Segoe UI" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="10"/>
        				<StackPanel VerticalAlignment="Center" Margin="10,0">
        					<TextBlock FontSize="18" Text="Po Po" Foreground="White" FontWeight="Light" FontFamily="Segoe UI"/>
        					<TextBlock FontSize="12" Text="Son of Sardaar" Foreground="#FFecff15" FontWeight="Bold" FontFamily="Segoe UI"/>
        				</StackPanel>
        			</Grid>
        			<Button Content="Button" HorizontalAlignment="Left" Margin="10,0,0,0" Height="56" Grid.RowSpan="2" Style="{StaticResource Top20PlayBtnstyle}" VerticalAlignment="Center" Width="56"/>
        		</Grid>
        		<Slider Value="53" Style="{StaticResource VolumeSliderStyle2}" Width="70" HorizontalAlignment="Right" Background="#FF1D1D1D" Height="15" Margin="0,10,0,0"/>
        		<TextBlock TextWrapping="Wrap" Text="Po Po" FontSize="26.667" FontFamily="Segoe UI" FontWeight="Light" Foreground="#7FFFFFFF" Margin="0,30,0,0"/>
        		<TextBlock TextWrapping="Wrap" FontSize="20" FontFamily="Segoe UI" FontWeight="Light" Foreground="White">
        			<Run FontWeight="Bold" Text="Artist: "/>
        			<Run Text="Abhinav Chedda"/>
        		</TextBlock>
        		<TextBlock TextWrapping="Wrap" FontSize="20" FontFamily="Segoe UI" FontWeight="Light" Foreground="White">
        			<Run FontWeight="Bold" Text="Album:"/>
        			<Run Text=" Son Of Sardaar"/>
        		</TextBlock>
        		<TextBlock TextWrapping="Wrap" FontSize="20" FontFamily="Segoe UI" FontWeight="Light" Foreground="White">
        			<Run FontWeight="Bold" Text="Year:"/>
        			<Run Text=" 2012"/>
        		</TextBlock>

        	</StackPanel>

            <ListView 
            x:Name="itemListView" x:FieldModifier="Internal"
            AutomationProperties.AutomationId="ItemListView"
            AutomationProperties.Name="Grouped Items"
            Grid.Column="2"            
            Margin="0,-10,0,0"           
            ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
            ItemTemplate="{StaticResource PlaylistDataTemplate}"
            SelectionMode="None"
            IsSwipeEnabled="false" Style="{StaticResource PlaylistListViewStyle}" ItemContainerStyle="{StaticResource PlaylistitemContainerStyle}">

                <ListView.GroupStyle>
                    <GroupStyle>
                        <GroupStyle.HeaderTemplate>
                            <DataTemplate>
                                <Grid Margin="7,7,0,0">
                                    <Button
                                    AutomationProperties.Name="Group Title"
                                    Style="{StaticResource TextPrimaryButtonStyle}">
                                        <StackPanel Orientation="Horizontal">
                                            <!--<TextBlock Text="{Binding Title}" Margin="3,-7,10,10" Style="{StaticResource GroupHeaderTextStyle}" />-->
                                            <!--<TextBlock Text="{StaticResource ChevronGlyph}" FontFamily="Segoe UI Symbol" Margin="0,-7,0,10" Style="{StaticResource GroupHeaderTextStyle}"/>-->
                                        </StackPanel>
                                    </Button>
                                </Grid>
                            </DataTemplate>
                        </GroupStyle.HeaderTemplate>
                    </GroupStyle>
                </ListView.GroupStyle>
            </ListView>
            <StackPanel Grid.ColumnSpan="2" Grid.Column="1" Orientation="Vertical" Grid.Row="1">
            	<TextBlock TextWrapping="Wrap" Text="05: 30" HorizontalAlignment="Right" FontSize="24" FontFamily="Segoe UI" FontWeight="Light" Margin="0,10"/>
            	<Slider VerticalAlignment="Top" Style="{StaticResource SeekSliderStyle}" Height="12" Value="35"/>
            	<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,30">
            		<Button  Height="50" Style="{StaticResource ControlsBtnStyle}" VerticalAlignment="Top" Width="50" Tag="{StaticResource Previous}" Margin="20,0"/>
                    <CheckBox Content="{StaticResource Play}" Tag="{StaticResource Pause}" Style="{StaticResource OnOffCheckBoxStyle}" Width="50" Height="50" Margin="20,0"/>

                    <Button  Height="50" Style="{StaticResource ControlsBtnStyle}" VerticalAlignment="Top" Width="50" Tag="{StaticResource Next}" Margin="20,0"/>
                    <Button  Height="50" Style="{StaticResource ControlsBtnStyle}" VerticalAlignment="Top" Width="50" Tag="{StaticResource Top20}" Margin="20,0"/>

                    <CheckBox Content="{StaticResource ShuffleOff}" Tag="{StaticResource ShuffleOn}" Style="{StaticResource ShuffleChckBoxStyle}" Width="50" Height="50" Margin="20,0"/>

                    <CheckBox Content="{StaticResource RepeatOff}" Tag="{StaticResource RepeatOn}" Style="{StaticResource ShuffleChckBoxStyle}" Width="50" Height="50" Margin="20,0"/>

                    <CheckBox Content="{StaticResource VolumeOn}" Tag="{StaticResource MuteOn}" Style="{StaticResource OnOffCheckBoxStyle}" Width="50" Height="50" Margin="20,0"/>









                </StackPanel>
            </StackPanel>
        </Grid>
        

        <!-- Back button and page title -->
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Button x:Name="backButton" Click="CloseFlyout" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
            <!--<TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" Grid.Column="1" IsHitTestVisible="false" Style="{StaticResource PageHeaderTextStyle}"/>-->
        </Grid>

        <VisualStateManager.VisualStateGroups>

            <!-- Visual states reflect the application's view state -->
            <VisualStateGroup x:Name="ApplicationViewStates">
                <VisualState x:Name="FullScreenLandscape"/>
                <VisualState x:Name="Filled"/>

                <!-- The entire page respects the narrower 100-pixel margin convention for portrait -->
                <VisualState x:Name="FullScreenPortrait">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                    
                    </Storyboard>
                </VisualState>

                <!--
                    The back button and title have different styles when snapped, and the list representation is substituted
                    for the grid displayed in all other view states
                -->
                <VisualState x:Name="Snapped">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>                      
                      
                    
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</common:LayoutAwarePage>
